<template>
    <div>
        <h1>卡卷列表</h1>
        <a href="/add">卡卷新增</a>
        <br>
        门店选择:<select v-model="list.storesid">
                        <option value="0">请选择</option>
                        <option v-for="m in xls" :value="m.storesId">{{ m.storeName }}</option>
                    </select>
        卡卷名称:<input type="text" v-model="list.cname">
        卡卷类型:<select v-model="list.cardtypeid">
                        <option value="0">请选择</option>
                        <option v-for="x in xl" :value="x.cardTypeId">{{x.cardTypeName}}</option>
                    </select>
        状态:<select v-model="list.stateid">
                        <option value="0">请选择</option>
                        <option v-for="s in xlss" :value="s.stateId">{{s.stateName}}</option>
                    </select>
        <input type="button" value="查询" @click="cx">
        <input type="button" value="重置" @click="cz">
        <input type="button" value="批量下架" @click="plxg">                                 
        <table class="table">
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="fx" @change="qxqbx"></td>
                    <td>卡卷名称</td>
                    <td>卡卷类型</td>
                    <td>适用范围</td>
                    <td>适用日期</td>
                    <td>有效期</td>
                    <td>价格</td>
                    <td>排序666</td>
                    <td>状态</td>
                    <td>图片</td>
                    <td>是否启用</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td><input type="checkbox" v-model="fxk" :value="d.cid"></td>
                    <td>{{d.cname}}</td>
                    <td>{{d.cardTypeName}}</td>
                    <td>{{d.storeName}}</td>
                    <td>{{d.cDateTime}}</td>
                    <td>{{d.cexpirationdate}}</td>
                    <td>{{d.cprice}}</td>
                    <td>{{d.csort}}</td>
                    <td :style="d.stateName=='上架'?'color: red;':'color: green;'">{{d.stateName}}</td>
                    <td><img :src="'https://localhost:7242/'+d.cimage" alt="" style="width: 60px;height: 60px;"></td>
                    <td >{{d.cEnable?"启用":"禁用"}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="ljsc(d.cid)">
                        <input type="button" value="编辑" @click="update(d.cid)">
                        <input type="button" :value="d.stateId==1?'下架':'上架'" @click="xg(d.cid)">
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{page.totanum}}条,每页{{list.size}}条,共{{page.totapage}}页,当前{{list.index}}页
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" v-for="m in page.totapage" :value="m" @click="ym(m)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        <input type="number" v-model="list.index" @change="tz(list.index)">
        <select v-model="list.size" @click="yrl">
            <option value="2">请选择</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

const fx=ref(false);
const fxk=ref([])
const qxqbx=()=>{
    if(fx.value){
        data.value.forEach(e=>{
            fxk.value.push(e.cid)
        })
    }
    else
    {
        fxk.value=[];
    }
}




const data=ref([{
    "cid": 2,
      "cname": "可口可乐",
      "cardTypeId": 1,
      "storesId": 1,
      "cDateTime": "周一,周二,周三",
      "cexpirationdate": "半年",
      "cprice": 100,
      "csort": 18,
      "stateId": 2,
      "cimage": "\\img\\100520251248591.webp",
      "cEnable": false,
      "cardTypeName": "优惠卡",
      "stateName": "下架",
      "storeName": "门店1"
}])
const list=ref({
    index:1,
    size:2,
    storesid:0,
    cname:"",
    cardtypeid:0,
    stateid:0,
    cenable:null
})
const page=ref({
    totanum:0,
    totapage:0
})
onMounted(()=>{
    show()
    xlk()
    xlks()
    xlkss()
})
const show=()=>{
    axios.get("/api/Cradolls/GetCardrolls",{params:list.value}).then(res=>{
        data.value=res.data.list
        page.value.totanum=res.data.listcount,
        page.value.totapage=Math.ceil(page.value.totanum/list.value.size)
    })
}
const fy=(val:any)=>{
    if(val==1){
        list.value.index=1
        show()
    }
    if(val==2){
        if(list.value.index>1){
            list.value.index-=1
            show()
        }
    }
    if(val==3){
        if(list.value.index<page.value.totapage)
        {
            list.value.index+=1
            show()
        }
    }
    if(val==4){
        list.value.index=page.value.totapage
        show()
    }
}
const ym=(val:any)=>{
    list.value.index=val
    show()
}
const tz=(val:any)=>{
    if(list.value.index>0&&list.value.index<=page.value.totapage){
        list.value.index=val;
        show()
    }
    else
    {
        list.value.index=1
    }
}
const yrl=()=>{
    list.value.index=1
    show()
}
const ljsc=(val:any)=>{
    if(confirm("确定删除吗")){
        axios.delete("/api/Cradolls/DelCardrolls",{params:{cid:val}}).then(res=>{
            if(res.data>0){
                alert("删除成功")
                show()
            }else{
                alert("删除失败")
            }
        })
    }
}
const plxg=()=>{
    if(confirm("确定修改吗")){
        axios.get("/api/Cradolls/UpCardrolls",{params:{cids:fxk.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }else{
            alert("修改失败")
        }
    })
    }
    
}
const xl=ref({})
const xlk=()=>{
    axios.get("/api/CardType/GetCardTypeList").then(res=>{
        xl.value=res.data;
    })
}
const xls=ref({})
const xlks=()=>{
    axios.get("/api/Stores/GetStores").then(res=>{
        xls.value=res.data;
    })
}
const xlss=ref({})
const xlkss=()=>{
    axios.get("/api/State/GetAllState").then(res=>{
        xlss.value=res.data;
    })
}
const cx=()=>{
    list.value.index=1
    show()
}
const cz=()=>{
    list.value.storesid=0,
    list.value.cardtypeid=0,
    list.value.cname="",
    list.value.stateid=0
    show()
}
const update=(val:any)=>{
    router.push({path:"/update",query:{cid:val}})
}
const xg=(val:any)=>{
    if(confirm("确认修改吗")){
        axios.get("/api/Cradolls/UpCardrollss",{params:{cid:val}}).then(res=>{
        if(res.data>0){
            alert("修改成功")
            show()
        }else{
            alert("修改失败")
        }
    })
    }
    
}
</script>

<style scoped>

</style>